🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】
📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化》
👀 Nuxt v4 內容與範例也可以參考並購買本系列文筆著所著書籍
📦 預計於 2025/08/14 出版，目前天瓏書局預購有 7️⃣8️⃣ 折優惠
👉 點此前往購買：https://pse.is/7yulwm

注意：Nuxt 4 已於 2025/07/16 釋出，本文部分內容或範例可能和最新版本有所不同

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

添加網站頁面的標題

調整 ./app.vue 檔案：

<script setup>
useHead({
  title: 'Nuxt 3 Blog'
})
</script>

調整 ./pages/articles/[id].vue 檔案：

useHead({
  title: article.value.title
})

添加網站頁面的標題模板

調整 ./app.vue 檔案中的 useHead 函式所傳入的物件：

<script setup>
useHead({
    title: 'Nuxt 3 Blog',
    titleTemplate: (title) => (title ? `${title} - Nuxt 3 Blog` : 'Nuxt 3 Blog'),
})
</script>

添加網站頁面 HTML Head 區塊中的標籤

調整 ./app.vue 檔案中的 useHead 函式所傳入的物件：

useHead({
  title: 'Nuxt 3 Blog',
  titleTemplate: (title) => (title ? `${title} - Nuxt 3 Blog` : 'Nuxt 3 Blog'),
  htmlAttrs: {
    lang: 'zh-TW'
  },
  link: [
    {
      rel: 'icon',
      href: '/favicon.ico'
    }
  ]
})

添加 SEO 搜尋引擎最佳化相關的 Meta Tags

調整 ./app.vue 檔案中：

useSeoMeta({
  description: '歡迎來到使用 Nuxt 3 開發的部落格網站',
  ogTitle: 'Nuxt 3 Blog',
  ogDescription: '歡迎來到使用 Nuxt 3 開發的部落格網站',
  ogUrl: 'http://localhost:3000/',
  ogImage: 'https://i.imgur.com/AVNujNC.png'
})

調整 ./pages/articles/[id].vue 檔案：

<script setup>
// ...

const description = article.value.content.replace(/\n/g, ' ').substring(0, 300)

useSeoMeta({
  description,
  ogTitle: article.value.title,
  ogDescription: description,
  ogImage: article.value.cover,
  ogUrl: () => `http://localhost:3000/articles/${article.value.id}`,
  twitterTitle: article.value.title,
  twitterDescription: description,
  twitterImage: article.value.cover,
  twitterUrl: () => `http://localhost:3000/articles/${article.value.id}`,
  twitterCard: 'summary_large_image'
})
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5